<template>
	<div>
		<div class="advanticements" v-for="(item,index) in adList">
			<img v-lazy="item.src" alt="">
			<div class="adTitle">
				{{item.title}}
				<div class="btns">
					<span v-for="oitem in item.category">
						{{oitem.name}}
					</span>
				</div>
			</div>
		</div>
		<div class="advanticements" v-for="(item,index) in cinemaLists">
			<img v-lazy="item.src" alt="">
			<div class="listTitle">
				{{item.title}}
			</div>
			<div class="listText">
				{{item.text.split("*")[0]}}<br>
				{{item.text.split("*")[1]}}<br>
				{{item.text.split("*")[2]}}
			</div>
		</div>
	</div>
</template>

<script>
	export default({
		data () {
			return {
				adList: [
					{
						title: "影院解决方案",
						src:require("../assets/solution.png"),
						category: [
							{name:"横幅广告"},
							{name:"竖屏广告"},
							{name:"大屏广告"},
							{name:"对接售票系统"}
						]
					}
				],
				cinemaLists:[
					{
						title: "云端制作",
						src:require("../assets/CloudProduction.png"),
						text: "通过北影云步的云平台，左右广告节目均从云端制作、下发*随时随地都可以便捷管理每一个显示终端*强大的终端多媒体播放能力"
					},
					{
						title: "多屏联动",
						src:require("../assets/MultiScreen.jpg"),
						text: "多个屏幕可以横排、竖排，甚至异形拼接，同时也支持独立屏幕；*影厅走廊、侯影区、吧台上方，均可灵活放置"
					},
					{
						title: "第三方信息接入",
						src:require("../assets/ThirdParty.jpg"),
						text: "提供场次排期信息接入服务"
					}
				]
			}
		}
	})
</script>

<style scoped>
	.advanticements {
		width:85%;
		background: #ccc;
		position: relative;
    margin:0 auto;
	}
	.advanticements>img{
		width: 100%;
		display: block;
		margin:0 auto;
	}
	.adTitle, .listTitle, .listText {
		width: 100%;
		position: absolute;
		top: 5%;
		text-align: center;
		font-size: 36px;
		color: #3573b9;
	}
	.listTitle {
		width: auto;
		display: inline;
		margin: 5% 20%;
	}
	.listText {
		width: auto;
		display: inline;
		font-size: 18px;
		color: #000;
		text-align: left;
		margin: 8% 20%;
	}
	.btns>span{
		display: inline-block;
		color: white;
		text-align: center;
		font-size: 18px;
		background: #7bbbe7;
		border-radius: 4px;
		margin:24px 20px ;
		padding:5px 5px;
		cursor: default;
	}
	.advanticements:nth-child(3) .listText,.advanticements:nth-child(3) .listTitle {
		color: #fff !important;
	}
	@media screen and (max-width:1600px){
		.listText {
			margin: 10% 20%;
		}
	}
</style>
